<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ"
    crossorigin="anonymous">
  <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
  <link rel="stylesheet" href="css/style.css">
  <title>Welcome to myTunes</title>
</head>

<body>
  <!-- Showcase & Nav -->
  <div id="showcase">
    <header>
      <nav class='cf'>
        <ul class='cf'>
          <li class="hide-on-small">
            <a href="#showcase">myTunes</a>
          </li>
          <li>
            <a href='#showcase'>Overview</a>
          </li>
          <li>
            <a href='#music'>Music</a>
          </li>
          <li>
            <a href='#video'>Video</a>
          </li>
          <li>
            <a href='#gift-cards'>Gift Cards</a>
          </li>
        </ul>
        <a href='#' id='openup'>myTunes</a>
      </nav>
    </header>
    <div class="section-main container">
      <h1>myTunes.</h1>
      <h2>Your music, movies, and TV shows take center stage.</h2>
      <p class="lead hide-on-small">
        myTunes is the best way to organize and enjoy the music, movies, and TV shows you already have — and shop for the ones you
        want. Enjoy all the entertainment myTunes has to offer on your Mac and PC.
      </p>
    </div>
  </div>

  <!-- Music Section -->
  <section id="music" class="section">
    <div class="container">
      <h2 class="section-head">
        <i class="fas fa-music"></i> Music
      </h2>
      <h3>45 million songs. Zero ads.</h3>
      <p class="lead">Stream over 45 million songs, ad-free. Or download albums and tracks to listen to offline. All the music in your personal
        myTunes library — no matter where it came from — lives right alongside the Orange Music catalog. Start your free
        three-month trial with no commitment, and cancel anytime.</p>
      <a href="#" class="btn btn-primary mb">Start Your Trial Now</a>
      <p class="text-light">Orange Music is available in myTunes, and for iOS and Android devices.</p>
      <img src="img/mockup1.png" alt="">
    </div>
  </section>

  <!-- Video Section -->
  <section id="video" class="section bg-light">
    <div class="container">
      <h3>The movie and TV collection you always wished for. Granted.</h3>
      <p class="lead">With over 100,000 movies and TV shows to choose from, there’s always something great to watch on myTunes and if you
        watch on Orange TV 4K, you’ll be able to enjoy a tremendous selection of your favorite content in 4K HDR. So get
        ready to enjoy episodes of your favorite TV shows or hit movies you’ve been waiting to see — anytime, anywhere. Just
        tap to play, or even download if you’re going somewhere you won’t have Wi-Fi.</p>
      <a href="#" class="btn btn-secondary">Read More</a>
      <img src="img/mockup2.png" alt="">
    </div>
  </section>

  <!-- Entertainment Section -->
  <section id="entertainment" class="section">
    <div class="container">
      <h3>A world of entertainment. Available wherever you are.</h3>
      <p class="lead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem veniam nobis, nisi ut expedita, doloribus reprehenderit
        explicabo non velit repellat alias saepe inventore repellendus? Molestias suscipit eos tempora? Quae quaerat cumque
        in veritatis impedit dolorum sapiente recusandae minima quo aperiam quam, excepturi quasi totam ad quas? Ipsam laudantium
        soluta delectus!</p>
    </div>
  </section>

  <!-- Gift Card Section -->
  <section id="gift-cards" class="section bg-light">
    <div class="container">
      <div class="gift-cards">
        <div>
          <img src="img/cards.png" alt="">
        </div>
        <div>
          <h2>Gift Cards</h2>
          <p>
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Neque expedita tempore quasi omnis a aut et totam illo fuga accusamus
            dolorum vero, ut harum consectetur. Minima molestias officiis culpa non sed dicta itaque. Et aliquam illo obcaecati
            molestias veritatis porro.
          </p>
          <p>Already have an Orange MyTunes Music Gift Card?</p>
          <hr>
          <a href="#" class="text-secondary">
            <i class="fas fa-chevron-right"></i> Redeem
          </a>
        </div>
      </div>
    </div>
  </section>

  <!-- Footer -->
  <footer>
    <div class="container">
      <div class="footer-cols">
        <ul>
          <li>Shop & Learn</li>
          <li>
            <a href="#">Music</a>
          </li>
          <li>
            <a href="#">Movies</a>
          </li>
          <li>
            <a href="#">Shows</a>
          </li>
          <li>
            <a href="#">Apps</a>
          </li>
          <li>
            <a href="#">Gift Cards</a>
          </li>
        </ul>

        <ul>
          <li>Orange Store</li>
          <li>
            <a href="#">Find a Store</a>
          </li>
          <li>
            <a href="#">Today at Orange</a>
          </li>
          <li>
            <a href="#">Orange Camp</a>
          </li>
          <li>
            <a href="#">Financing</a>
          </li>
          <li>
            <a href="#">Order Status</a>
          </li>
        </ul>

        <ul>
          <li>Education & Business</li>
          <li>
            <a href="#">Orange & Education</a>
          </li>
          <li>
            <a href="#">Shop For College</a>
          </li>
          <li>
            <a href="#">Orange & Business</a>
          </li>
          <li>
            <a href="#">Shop For Business</a>
          </li>
          <li>
            <a href="#">Jobs</a>
          </li>
        </ul>

        <ul>
          <li>About Orange</li>
          <li>
            <a href="#">Newsroom</a>
          </li>
          <li>
            <a href="#">Orange Leadership</a>
          </li>
          <li>
            <a href="#">Investors</a>
          </li>
          <li>
            <a href="#">Events</a>
          </li>
          <li>
            <a href="#">Contact Orange</a>
          </li>
        </ul>

      </div>
    </div>
    <div class="footer-bottom text-center">
      Copyright &copy; 2018 Orange myTunes
    </div>
  </footer>

  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
    crossorigin="anonymous"></script>
  <script src="js/main.js"></script>
</body>

</html>